<template>
  <div class="card-container" @click="openUrl">
    <div class="title" v-if="title">{{title}}</div>
    <img :src="image" />
    <div class="desc" v-if="desc">{{desc}}</div>
  </div>
</template>

<script>

// import { getNoticeList, createNotice, deleteNotice } from '../../api';

export default {
  name: 'Card',
  components: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    image: {
      type: String,
      default: ''
    },
    link: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
     
    };
  },
  computed: {
    
  },
  methods: {
    openUrl() {
      if (this.link) window.open(this.link);
    }
  },
  mounted() {
   
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
  .card-container {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    .title {
      font-size: 16px;
      font-weight: bold;
      line-height: 40px;
      border-bottom: 1px solid #f0f0f0;
    }

    .desc {
      font-size: 14px;    
      line-height: 1.5;
      padding: 8px;
    }

    img {
      vertical-align: top;
      width: 100%;
      height: auto;
    }
  }
</style>
